import React from 'react';
import Table from './Table';
import { HeaderColumnType, RowDataType } from './Table.types';
import { useTableSelection } from '../hooks/useTableSelection';
import './Table.stories.css';

const headerArray: HeaderColumnType[] = [
    {
        title: "ID",
        name: "id"
    },
    {
        title: "Имя",
        name: "name"
    },
    {
        title: "Фамилия",
        name: "family"
    },
    {
        title: "Отчество",
        name: "surname"
    },
    {
        title: "Actions",
        name: "actions"
    }
];

const rowArray: RowDataType[] = [
    {
        id: 1,
        disabled: false,
        name: "Василий",
        family: "Васькин",
        surname: "Васильевич",
        actions: <button type='button' style={{ marginLeft: "1rem" }}>Ok-1</button>
    },
    {
        id: 2,
        disabled: false,
        name: "Генадий",
        family: "Генкин",
        surname: "Генадьевич",
        actions: <button type='button' style={{ marginLeft: "1rem" }}>Ok-2</button>
    },
    {
        id: 3,
        disabled: false,
        name: "Кузьма",
        family: "Кузькин",
        surname: "Кузьмич",
        actions: <button type='button' style={{ marginLeft: "1rem" }}>Ok-3</button>
    },
    {
        id: 4,
        disabled: false,
        name: "Вечеслав",
        family: "Славкин",
        surname: "Вячеславич",
        actions: <button type='button' style={{ marginLeft: "1rem" }}>Ok-4</button>
    }
];

interface ITableWrapper {
    className?: string;
    columnList?: HeaderColumnType[];
    rowList?: RowDataType[];
    enableActions?: boolean;
    enableCheckbox?: boolean;
    striped?: boolean;
}

const TableWrapper = (
    {
        className,
        columnList,
        rowList,
        enableActions,
        enableCheckbox,
        striped

    }: ITableWrapper) => {

    const { selectedRows, handleSelect, handleSelectAll } = useTableSelection(rowList);

    return (
        <Table
            className={className}
            columnList={columnList}
            rowList={rowList}
            selectedRows={selectedRows}
            onSelect={handleSelect}
            onSelectAll={handleSelectAll}
            enableActions={enableActions}
            enableCheckbox={enableCheckbox}
            striped={striped}
        />
    )
};

const metaTable = {
    title: 'Table',
    component: TableWrapper
};

TableWrapper.defaultProps = {
    columnList: [],
    rowList: [],
    enableActions: true,
    enableCheckbox: true,
    striped: true 
}

export const CustomTable = {
    args: {
        className: 'tableStyle',
        columnList: headerArray,
        rowList: rowArray,
        enableActions: true,
        enableCheckbox: true,
        striped: true 
    },
    component: TableWrapper
}

export default metaTable;